<template>
  <div class="container">
    <!-- 顶部栏 -->
    <g-header :header="header">
    </g-header>
    <!-- 广告 -->
    <g-banner1 :img="ad.flash_img"></g-banner1>
    <!-- 关于我们 -->
    <div class="abount-us-container">
      <img class="logo" :src="'http://localhost:8000'+ad.index_about_us_img.ad_value" alt="">

      <div class="content">
        <p>{{ad.index_about_us_content.ad_value}}</p>
        <div class="btn">
          <router-link target="_blank" :to="ad.index_abount_us_url[0].ad_value">查看更多></router-link>
        </div>
      </div>
      <div class="axdvertisement-container">
        <g-banner class="banner-1" :img="ad.index_about_us_banner"></g-banner>
      </div>
    </div>
    <!-- 新闻动态 -->
    <div class="news-container">
      <img class="logo" :src="'http://localhost:8000'+ad.index_news_img.ad_value" alt="">
      <div class="btn-list">
        <a v-for="(menu,index) in ad.index_news_val" class="btn" :key="index" :class="{'active': index==index_news_active}" @click="index_news_active=index">{{menu.name}}</a>
      </div>
      <div class="news-list-container">
        <div class="news-list">
          <div class="news" v-for="(news,index) in ad.index_news_val[index_news_active].content.data" :key="index">
            <p class="title">{{news.news_title}}</p>
            <p class="content">{{news.news_describe}}</p>
            <p class="read-more">
              <router-link :to="`/page/${news.uid}/-1`">查看详情>></router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品研发 -->
    <div class="development-container">
      <img class="logo" :src="'http://localhost:8000'+ad.index_development_img.ad_value" alt="">
      <div class="info" v-for="(item,index) in ad.development_val" :key="index">
        <img :src="'http://localhost:8000'+item.ad_value.img" alt="">
        <div class="introduce">
          <p>{{item.ad_value.name}}</p>
          <p class="hidden-in-xs">{{item.ad_value.val}}</p>
        </div>
        <div class="hidden-in-xs mask"></div>
      </div>
    </div>
    <!-- 产品展示 -->
    <div class="product-container">
      <img class="logo" :src="'http://localhost:8000'+ad.index_product_img.ad_value" alt="">
      <div class="axdvertisement-container">
        <g-banner class="banner-1" @change="show_product_change" :img="ad.index_product_show"></g-banner>
      </div>
      <div class="content">
        <span class="title">
          {{ad.index_product_show[show_product_index].goods_name}}
        </span>
        <p>{{ad.index_product_show[show_product_index].goods_describe}}</p>
        <div class="btn"><router-link :to="`/product/${ad.index_product_show[show_product_index].uid}/0`">查看详情></router-link></div>
      </div>

    </div>
    <!-- 加盟招商 -->
    <div class="join-in-container">
      <img class="logo" :src="'http://localhost:8000'+ad.index_join_us_img.ad_value" alt="">
      <div class="content-container">
        <div class="item" v-for="item in ad.index_join_us_val">
          <i :class="'fas '+item.ad_value.class"></i>
          <p>{{item.ad_value.name}}</p>
          <div class="decorate"></div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <g-footer></g-footer>
  </div>
</template>
<script>
  import header from '@/components/header'
  import banner1 from '@/components/banner1'
  import banner from '@/components/banner'
  import footer from '@/components/footer'
  export default {
    components: {
      'g-header': header,
      'g-banner1': banner1,
      'g-banner': banner,
      'g-footer': footer
    },
    data() {
      return {
        ad: {},
        index_news_active: 0,
        show_product_index: 0,   
      }
    },
    methods:{
      show_product_change:function(index){
        this.show_product_index=index
      }
    },
    created: function () {
      let that = this;
      this.$axios.get('http://localhost:8000/api/index')
        .then(function (response) {
          // 处理下产品展示的数据，用于给banner 用，需要ad_value，把goods_file 改成 ad_value
  
          for (let i in response.data.ad.index_product_show) {
            response.data.ad.index_product_show[i].ad_value = response.data.ad.index_product_show[i].goods_file1
          }
          that.ad = response.data.ad
        })
        .catch(function (response) {});
    }
  }

</script>
<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 100%;
    height: 100%;
    .abount-us-container {
      height: 550px;
      width: 100%;
      .On-xs( {
        height: 456px;
      }
      );
      .logo {
        width: 87px;
        height: 77px;
        margin: 0 calc(50% - 41.5px);
        padding-top: 51px;
        float: left;
        display: block;
        .On-xs( {
          width: 56px;
          height: 50px;
          padding-top: 25px;
          margin: 0 calc(50% - 28px);
        }
        )
      }
      .content {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 181px;
        }
        );
        p {
          width: 559px;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 24px;
          letter-spacing: 0px;
          color: #a17656;
          text-align: left;
          padding-left: calc(100% - 559px - 41px);
          padding-top: 56px;
          .Mult-line(4);
          .On-xs( {
            width: calc(100% - 40px);
            height: 93px;
            margin: 0 20px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #a17656;
            padding-top: 24px;
            .Mult-line(5);
          }
          )
        }
        .btn {
          width: 100px;
          height: 30px;
          border-radius: 3px;
          border: solid 1px #a17657;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #a3795b;
          margin-left: calc(100% - 559px - 41px);
          margin-top: 215px;
          a {
            .A-all-state( {
              text-decoration: none !important;
              color: #a3795b !important;
            }
            );
          }

          .On-xs( {
            width: 80px;
            height: 24px;
            margin-top: 20px;
            margin-left: calc(50% - 40px);
            line-height: 24px;
            font-size: 12px;
          }
          )
        }
      }
      .axdvertisement-container {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 200px;
        }
        );
        .banner-1 {
          margin-top: 52px;
          .On-xs( {
            margin-top: 0
          }
          )
        }
      }
    }
    .news-container {
      height: 750px;
      width: 100%;
      background: #ffedc9;
      position: relative;
      overflow: hidden;
      .On-xs( {
        height: auto;
        padding-bottom: 20px;
      }
      );
      .logo {
        width: 87px;
        height: 77px;
        margin: 0px auto; //margin: 0 calc(50% - 41.5px);
        padding-top: 51px; //float: left;
        display: block;
        .On-xs( {
          width: 56px;
          height: 50px;
          padding-top: 25px;
          margin: 0 calc(50% - 28px);
        }
        )
      }
      .btn-list {
        width: 100%;
        overflow: hidden;

        display: block;
        text-align: center;
        margin-top: 56px;
        .On-xs( {

          margin-top: 25px;

        }
        );
        .btn {
          width: 100px;
          line-height: 30px;
          display: inline-block;
          border-radius: 3px;
          border: solid 1px #a17657;
          font-family: MicrosoftYaHei;
          font-size: 15px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #a17657; // float: left;
          margin: 0 15px;
          box-sizing: border-box;
          &.active {
            background: #a17657;
            color: #FFF;
          }
          .On-xs( {
            width: 80px;
            height: 24px;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #a17657;
            margin: 0 5px;
          }
          )
        }
      }
      .news-list-container {
        width: 100%;
        display: block;
      }
      .news-list {
        margin: 0px auto;
        width: 100%;
        max-width: 1240px;
        .On-xs( {
          margin: 0 10px;
          width: calc(100% - 20px);
        }
        );
        .news {
          width: 580px;
          float: left;

          margin-top: 47px;
          box-sizing: border-box;

          .Bigger-then-xs( {
            margin: 47px 20px 0;
          }
          );
          border-bottom: 1px solid #a17657;
          .On-xs( {
            width: 100%;
            height: 103px;
            padding: 0;
            margin-top: 23px;
            &:first-child {
              margin-top: 67px;
            }
          }
          );
          .title {
            float: right;
            width: 581px;
            height: 16px;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 16px;
            letter-spacing: 0px;
            color: #543e2e;
            text-align: left;
            .On-xs( {
              width: 100%;
              height: 13px;
              font-family: MicrosoftYaHei;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 13px;
              letter-spacing: 0px;
              color: #543e2e;
            }
            );
          }
          .content {
            float: right;
            width: 581px;
            height: 72px;
            text-align: left;
            margin-top: 57px;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #a17656;
            .Mult-line(3);
            .On-xs( {
              width: 100%;
              height: 45px;
              margin-top: 14px;
              font-size: 11px;
              line-height: 15px;
              letter-spacing: 0px;
              color: #a17656;
            }
            );
          }
          .read-more {
            float: right;
            width: 581px;
            text-align: right;
            height: 15px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0px;
            letter-spacing: 0px;
            color: #a17657;
            margin-top: 15px;
            a {
              .A-all-state( {
                text-decoration: none !important;
                color: #a3795b !important;
              }
              );
            }
            .On-xs( {
              font-size: 10px;
              line-height: 10px;
              margin-top: 0;
              padding-top: 10px;
            }
            )
          }
        }
      }
    }
    .development-container {
      .logo {
        width: 240px;
        height: 77px;
        display: block;
        margin: 0 auto;
        margin-top: 51px;
        .On-xs( {
          width: 156px;
          height: 50px;
          margin-top: 25px;
          margin-bottom: 25px;
        }
        )
      }
      .info {
        margin-top: 53px;
        width: 25%;
        height: 560px;
        float: left;
        position: relative;
        .Bigger-then-xs( {
          &:hover .mask {
            display: none;
          }
          &:hover .introduce {
            background-color: rgba(161, 118, 87, 0.6);
            p:first-child,
            p:last-child {
              color: #FFF;
            }
          }
          &:last-child {
            margin-bottom: 40px;
          }
        }
        );
        .On-xs( {
          width: 50%;
          height: 140px;
          margin-top: 0;
          &:last-child {
            margin-bottom: 20px;
          }
        }
        );
        img {
          width: 100%;
          height: 560px;
          .On-xs( {
            height: 140px;
          }
          )
        }
        .mask {
          width: 100%;
          height: 560px;
          background-color: rgba(255, 255, 255, 0.7);
          position: absolute;
          top: 0;
          left: 0;
        }
        .introduce {
          width: 240px;
          height: 240px;
          background-color: rgba(255, 255, 255, 0.6);
          border-radius: 240px;
          position: absolute;
          top: 159px;
          left: calc(50% - 120px);
          z-index: 2;
          .On-xs( {
            width: 80px;
            height: 80px;
            background-color: rgba(161, 118, 87, 0.8);
            top: 30px;
            left: calc(50% - 40px);
          }
          );
          p:first-child {
            width: 100%;
            height: 18px;
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #a17657;
            text-align: center;
            margin-top: 101px;
            .On-xs( {
              height: 14px;
              font-family: MicrosoftYaHei;
              text-decoration: underline;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 0px;
              letter-spacing: 1px;
              color: #ffffff;
              text-align: center;
              line-height: 80px;
              margin-top: 0;
            }
            );
          }
          p:last-child {
            width: 100%;
            height: 13px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 1px;
            color: #a17657;
            text-align: center;
            margin-top: 5px;
          }
        }
      }
    }
    .product-container {
      height: 550px;
      width: 100%;
      background: #ffedc9;
      float: left;
      .On-xs( {
        height: 456px;
      }
      );
      .logo {
        width: 87px;
        height: 77px;
        margin: 0 calc(50% - 41.5px);
        padding-top: 51px;
        float: left;
        display: block;
        .On-xs( {
          width: 56px;
          height: 50px;
          padding-top: 25px;
          margin: 0 calc(50% - 28px);
        }
        )
      }
      .content {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 181px;
        }
        );
        .title {
          .Bigger-then-xs( {
            padding-top: 56px;
            text-align: left;
            padding-left: 40px;
            display: block;
            height: 16px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0px;
            letter-spacing: 0px;
            color: #543e2e;
          }
          );
          .On-xs( {
            width: 100%;
            height: 13px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0px;
            letter-spacing: 0px;
            color: #543e2e;
            text-align: center;
          }
          )
        }
        p {
          width: 559px;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 24px;
          letter-spacing: 0px;
          color: #a17656;
          text-align: left;
          height: 24px*8;
          .Mult-line(8);
          .Bigger-then-xs( {
            padding-left: 41px;
            padding-top: 41px;
          }
          );
          .On-xs( {
            width: calc(100% - 40px);
            margin: 0 20px;
            height: 93px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #a17656;
            padding-top: 14px;
            height: 18px*3;
            .Mult-line(3);
          }
          )
        }
        .btn {
          width: 100px;
          height: 30px;
          border-radius: 3px;
          border: solid 1px #a17657;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #a3795b;
          margin-left: 41px;
          margin-top: 59px;
          a {
            .A-all-state( {
              text-decoration: none !important;
              color: #a3795b !important;
            }
            );
          }
          .On-xs( {
            width: 80px;
            height: 24px;
            margin-top: 20px;
            margin-left: calc(50% - 40px);
            line-height: 24px;
            font-size: 12px;
          }
          )
        }
      }
      .axdvertisement-container {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 200px;
          margin-top: 33px;
        }
        );
        .banner-1 {
          margin-top: 52px;
          float: right;
          .On-xs( {
            margin-top: 0;
          }
          )
        }
      }
    }
    .join-in-container {
      width: 100%;
      height: 468px;
      background: #FFF;
      float: left;
      .On-xs( {
        height: 390px;
      }
      );
      .logo {
        width: 134px;
        height: 77px;
        display: inline-block;
        margin-top: 51px;
        .On-xs( {
          width: 87px;
          height: 50px;
          margin-top: 25px;
        }
        );
      }
      .content-container {
        width: 1120px;
        height: 162px;
        margin: 0 auto;
        margin-top: 52px;
        .On-xs( {
          width: calc(100% - 30px);
          margin-top: 15px;
        }
        );
        .item {
          width: 240px;
          height: 162px;
          border: solid 1px #a17657;
          float: left;
          margin: 0 20px;
          box-sizing: border-box;
          .On-xs( {
            width: calc(50% - 10px);
            height: 110px;
            margin: 10px 5px 0;
          }
          );
          &:hover {
            background-color: #a17657;
            i {
              color: #FFF;
              border-color: #FFF;
            }
            p {
              color: #FFF;
            }
            div {
              background: #FFF;
            }
          }
          i {
            font-size: 34px;
            height: 67px;
            width: 67px;
            line-height: 67px;
            text-align: center;
            border: 2px solid #a17657;
            color: #a17657;
            border-radius: 50%;
            margin-top: 17px;
            .On-xs( {
              width: 45px;
              height: 45px;
              line-height: 45px;
              font-size: 28px;
              margin-top: 12px;
            }
            );
          }
          p {
            width: 100%;
            text-align: center;
            height: 17px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0px;
            letter-spacing: 0px;
            color: #a17657;
            margin-top: 28px;
            .On-xs( {
              font-size: 13px;
              margin-top: 18px;
            }
            );
          }
          div {
            width: 30px;
            height: 4px;
            background-color: #a17657;
            border-radius: 1px;
            margin: 0 auto;
            .On-xs( {
              width: 20px;
              height: 2px;
              ;
            }
            )
          }
        }
      }
    }
  }

</style>
